    <template>
    
    <div class="troch" v-cloak>
    
      <!--  关于我们 -->
      <div class="concernes">
            <transition name="Xslide-fade" >
            <div class="container" v-if="Navigation">
                    <ul class="orid clearfix" style="top:auto;">
                      <li>
                        <img src="../../../static/images/cjzx.png" alt="" /><a>集采中心</a
                        ><i class="glyphicon glyphicon-menu-right"></i>
                      </li>
                      <li>
                        <img src="../../../static/images/csfw.png" alt="" /><a>财税服务</a
                        ><i class="glyphicon glyphicon-menu-right"></i>
                      </li>
                      <li>
                        <img src="../../../static/images/flfw.png" alt="" /><a>法律服务</a
                        ><i class="glyphicon glyphicon-menu-right"></i>
                      </li>
                      <li>
                        <img src="../../../static/images/rlzy.png" alt="" /><a>人力资源</a
                        ><i class="glyphicon glyphicon-menu-right"></i>
                      </li>
                      <li>
                        <img src="../../../static/images/lj.png" alt="" /><a>供应链服务</a
                        ><i class="glyphicon glyphicon-menu-right"></i>
                      </li>
                      <li>
                        <img src="../../../static/images/zx.png" alt="" /><a>集咨询管理</a
                        ><i class="glyphicon glyphicon-menu-right"></i>
                      </li>
                      <li>
                        <img src="../../../static/images/jr.png" alt="" /><a>金融服务</a
                        ><i class="glyphicon glyphicon-menu-right"></i>
                      </li>
                      <li>
                        <img src="../../../static/images/pg.png" alt="" /><a>评估认证</a
                        ><i class="glyphicon glyphicon-menu-right"></i>
                      </li>
                      <li>
                        <img src="../../../static/images/dn.png" alt="" /><a>专业技术</a
                        ><i class="glyphicon glyphicon-menu-right"></i>
                      </li>
                      <li>
                        <img src="../../../static/images/zh.png" alt="" /><a>综合服务</a
                        ><i class="glyphicon glyphicon-menu-right"></i>
                      </li>
                    </ul>
                  </div>
         </transition>

         <div class="container main">
                <div class="posid"><p>您当前位置：服务超市>联系我们</p></div>
                <!-- 内容 -->
                <div class="hot_BJ attache clearfix">
                  <div class="aside clearfix">
                    <ul>
                      <li class="poles">
                        <span>关于我们</span>
                        <span>ABOUT ME</span>
                      </li>
                      <li
                        v-for="(item ,index) in aboutDta"
                        :class="{'contaction':contact === index}"
                        @click="domain(index)"
                      >
                        {{ item.title }}&#x3000;&#x3000;&#x3000;〉
                      </li>
                    </ul>
                  </div>
                  <div class="ifreds">
                    <!-- 超市介绍 -->
                    <div class="supermarket" v-show="marker">
                      <h4 class="con_top">企业服务超市</h4>
                      <p class="magin_T"><a href="#">超市特色功能介绍》</a></p>
                      <p class="con_text">
                          为更好地发挥苏州工业园区企业发展服务促进会（以下简称＂企服会）的机构职能，推动区域性科技服务
                          协会的共同繁荣与发展。现根据企服会<a href="#"> 《章程》</a>，制定如下内容：
                        </p>
                      <div v-for="item in marketdata">
                        <h4 class="con_title">{{item.title}}</h4>
                        <p v-for="item in item.text">{{item}}</p>
                      </div>
                      <div>
                        <h4 class="con_title">服务功能</h4>
                     <p>多渠道采集服务机构、服务人员的信息，健全机构及顾问服务档案，建立基于口碑的服务供需匹配及服务质量管理体系；整合上下游服务链，实现供需精准对接、评价评优、政策党现、活动培训、行业分析、资讯服务等功能；基于服务大数据，为企业提供更专业的平台化服务，为区域高端服务业产业分析提供基础数据。面向政府与相关行业主管部门开放</p>
                      </div>
                     
                      <div class="resta">
                        <h4 class="con_title">资料下载</h4>
                        <p v-for="item in downloaddata"><button type="button" class="btn btn-primary">{{item.btn}}</button> <a href="#">{{item.href}}</a><span>{{item.jgb}}</span></p>
                      </div>
                    </div>
                    <!-- 会员权益 -->
                    <div class="interests" v-show="equity">
                      <h4 class="con_top">会员入会须知</h4>
                      <p class="con_text">
                          为更好地发挥苏州工业园区企业发展服务促进会（以下简称＂企服会）的机构职能，推动区域性科技服务
                          协会的共同繁荣与发展。现根据企服会<a href="#"> 《章程》</a>，制定如下内容：
                        </p>
                        <div class="joine">
                          <h4 class="con_title">入会流程</h4>
                        <p>各行业入会细则参考<a href="#">《苏州工业园区企业发展服务促进会会员准入退出管理细则》</a>点击下載＞面向政府与相
                            关行业主管部门开放。</p>
                        </div>
                        <div class="joine">
                            <h4 class="con_title">入会流程</h4>
                            <ul>
                              <li>线上申请：企业服务超市（HTTPASME．SIPAC．GOV．CN／SSM／）;</li>
                              <li>提交入会申请材料至秘书处;</li>
                              <li>按照章程制定会费标准，缴纳会费；</li>
                              <li>企服会会员代表大会表決通过，正式成为会员机构；</li>
                            </ul>
                          </div>
                          <div class="joine" v-for="item in memberdata">
                              <h4 class="con_title">{{item.title}}</h4>
                              <ul>
                                <li v-for="item in item.text">{{item}}</li>
                              </ul>
                            </div>
                           
                    </div>
                    <!-- 联系我们 -->
                    <div class="connection" v-show="elation">
                      <h4 class="con_top">联系我们</h4>
                      <p class="con_text">
                        为更好地发挥苏州工业园区企业发展服务促进会（以下简称＂企服会）的机构职能，推动区域性科技服务
                        协会的共同繁荣与发展。现根据企服会<a href="#"> 《章程》</a>，制定如下内容：
                      </p>
                      <div v-for="item in touch">
                        <h4 class="con_title">{{item.title}}</h4>
                        <p>地址：{{item.address}}</p>
                        <p>邮编：{{item.email}}</p>
                        <p>电话：{{item.tel}}</p>
                        <p>传真：{{item.cz}}</p>
                      </div>
                    </div>
                  </div>
                </div>
                <br />
                <br />
              </div>

      </div>

      
    </div>
</template>


<script>
import headlogin from '../../views/localPage/headlogin'
  export default{

  data(){
      return{
    contact: 0, //关于我们分类光标默认选择
    Selectabout: true, //页面的隐藏显示
    Navigation:false,//服务分类的隐藏显示

    marker: true,
    equity: false,
    elation: false,

    navD: [
      { id: 1, zt: "首页" },
      { id: 2, zt: "采集中心" },
      { id: 3, zt: "服务机构" },
      { id: 4, zt: "服务顾问" },
      { id: 5, zt: "关于我们" }
    ],
    aboutDta: [
      { id: 1, title: "超市介绍" },
      { id: 2, title: "会员权益" },
      { id: 3, title: "联系我们" }
    ],
    marketdata: [
      {
        title: "超市定位",
        text: [
          "区域性权威的科技服务业信息共享平台，服务企业及机构。",
          "对企业：帮助企业快速找到信规范、价格合理的合作伙伴。",
          "对机构：帮助服务机构拓展市场，促进供需双方共同成长。"
        ]
      },
      {
        title: "面向对象",
        text: [
          "面向专业服务机构开放，具体要求详见《苏州工业园区企业发展服务促进会服务领域》；",
          "面向专业服务顾问开放；",
          "面向所有企业开放；"
        ]
      }
    ],
    touch: [
      {
        title: "总部联系方式",
        address: "厦门市湖里区湖里大道33~35号六层西侧30#厂房",
        email: "361006",
        tel: "592-5703605",
        cz: "592-5703604"
      },
      {
        title: "上海研发中心",
        address: "上海市浦东新区沈海录123弄星月智汇湾9号楼3楼B座房",
        email: "201318",
        tel: "021-68409021",
        cz: "021-68388010"
      }
    ],
    memberdata: [
      {
        title: "会员权利",
        text: [
          "可参与企服会发展事项讨论",
          "可依托企业服务超市，搭建会员机构第二门户网站，通过线上平台，实现与企业的供需对接",
          "优秀服务事迹、重大创新举措、重要荣资质等信息，可依托园区相关政府及公益平台，进行宣传推广",
          "可围绕企业关注的需求或疑，依托自身专业力量，承办企业发展服务沙龙活动及相关专业培训。",
          "可参与区域性服务产业调研，参与相关政策讨论"
        ]
      },
      {
        title: "会员义务",
        text: [
          "可参与企服会发展事项讨论",
          "可依托企业服务超市，搭建会员机构第二门户网站，通过线上平台，实现与企业的供需对接",
          "优秀服务事迹、重大创新举措、重要荣资质等信息，可依托园区相关政府及公益平台，进行宣传推广",
          "可围绕企业关注的需求或疑，依托自身专业力量，承办企业发展服务沙龙活动及相关专业培训。",
          "可参与区域性服务产业调研，参与相关政策讨论"
        ]
      }
    ],
    downloaddata: [
      { btn: "附件一", href: "企业服务超市用户使用手册", jgb: "【机构版】" },
      { btn: "附件二", href: "企业服务超市用户使用手册", jgb: "【机构版】" },
      { btn: "附件三", href: "企业服务超市用户使用手册", jgb: "【机构版】" },
      { btn: "附件四", href: "企业服务超市用户使用手册", jgb: "【机构版】" }
    ]
    
   }
  },
  methods: {
    // 导航栏
    getItme: function(item, index) {
      this.cur = index;
      switch(index)
      {
                  case 0:
             
                  this.$router.push({ path:'/ServiceSupermarket/Home'})
                  break;
                  case 1:
           
                  this.$router.push({ path:'/ServiceSupermarket/GatheringCenter'})
                  break;
                  case 2:
              
                    this.$router.push({ path:'/ServiceSupermarket/ServiceOrganization'})
                  break;
                  case 3:
                  
                    this.$router.push({ path:'/ServiceSupermarket/ServiceConsultant'})
                  break;
                  case 4:
                  
                    this.$router.push({ path:'/ServiceSupermarket/About'})
                  break;
      }
    },
  
    // 搜索邻域：        不限
    search: function() {},
    // 关于我们
    domain: function(index) {
      this.contact = index;
    },
 // 关于我们
     domain: function(index) {
      this.contact = index;
      if (index == 0) {
        this.marker = true;
        this.equity = false;
        this.elation = false;
      } else if (index == 1) {
        this.marker = false;
        this.elation = false;
        this.equity = true;
      } else if (index == 2) {
        this.marker = false;
        this.elation = true;
        this.equity = false;
      }
    },
   
  },

  computed: {},
  components:{headlogin}
};

</script>
<style scoped>
.concernes{
  width: 100%;
}
.concernes .attache {
  display: flex;
  justify-content: space-between;
}
/* .concernes .attache .aside{
  width: 240px;
} */
.concernes .attache .aside ul li{
  width: 240px;
  height: 55px;
  text-align: center;
  line-height: 55px;
  border-top: solid 1px #e0e0e0;
}
.concernes .attache .aside ul li:last-child{
  border-bottom: solid 1px #e0e0e0;
}
.concernes .attache .aside .poles{
  height: 100px;
  border: 1px solid red;
  line-height: 1;
  border: none;
}
.concernes .attache .aside .poles span{
  display: inline-block;
  width: 90%;
}
.concernes .attache .aside .poles span:first-child{
  font-family: MicrosoftYaHei-Bold;
	font-size: 24px;
	line-height: 28px;
  letter-spacing: 0px;
  font-weight:600;
  color: #1575f9;
  margin-top: 20px;
}
.concernes .attache .aside .poles span:last-child{
  font-family: ArialMT;
	font-size: 16px;
	letter-spacing: 1px;
  color: #1575f9;
  margin-top: 5px;
}
.concernes .attache .ifreds{
  width:calc(100% - 240px);
  border-left: 1px solid #e0e0e0;
  padding: 40px ;
}

.concernes .attache .aside .contaction{
  background-image: url(../../../static/images/shape.png);
  background-repeat: no-repeat;
  background-size: 100%;
  color: white;
}
.supermarket .magin_T{
  text-align: right;
}
.con_top{
    text-align: center; height: 80px;
}
 .con_text{
 margin-bottom: 50px;
}
 .con_top,.con_title{
	font-family: MicrosoftYaHei-Bold;
	font-size: 20px;
  line-height: 28px;
  font-weight: 600;
	letter-spacing: 1px;
}
.con_title{
  margin-top: 30px;
}
.joine ul{
  padding-left: 15px;
}
.joine ul li{
  margin-top: 5px;
  list-style-type: decimal;
}
.resta button{
  margin-right: 10px;
}
.resta span,.resta a{
  font-family: MicrosoftYaHei;
	font-size: 16px;
	font-weight: normal;
	letter-spacing: 1px;
	color: #666666;
}
.resta a{
  text-decoration:underline;
}
</style>

